<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Login</title>
		<link href="../css/studysanlan1.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
	function removeElement() {
		document.getElementById("extraDiv4").style.display = "block";
	}
</script>
	</head>
	<body>
		<div id="container">
			<div id="intro">
				<div id="pageHeader">
					<h1>
						&nbsp;
					</h1>
					<p>
						&nbsp;
					</p>
					<p>
						&nbsp;
					</p>
				</div>
				<div id="quickSummary">
					<p>
						A demonstration of what can be accomplished visually through
						<acronym title="Cascading Style Sheets">CSS</acronym>-based
						design. Select any style sheet from the list to load it into this
						page.
					</p>
					<p>
						Download the sample
						<a href="http://www.csszengarden.com/zengarden-sample.html"
							title="This page's source HTML code, not to be modified.">html
							file</a> and
						<a href="http://www.csszengarden.com/zengarden-sample.css"
							title="This page's sample CSS, the file you may modify.">css
							file</a>
					</p>
				</div>
				<div id="preamble">
					<h3>
						&nbsp;
					</h3>
					<p>
						&nbsp;
					</p>
					<p>
						Littering a dark and dreary road lay the past relics of
						browser-specific tags, incompatible
						<acronym title="Document Object Model">DOM</acronym>s, and broken
						<acronym title="Cascading Style Sheets">CSS</acronym> support.
					</p>
					<p>
						Today, we must clear the mind of past practices. Web enlightenment
						has been achieved thanks to the tireless efforts of folk like the
						<acronym title="World Wide Web Consortium">W3C</acronym>,
						<acronym title="Web Standards Project">WaSP</acronym> and the
						major browser creators.
					</p>
					<p>
						The css Zen Garden invites you to relax and meditate on the
						important lessons of the masters. Begin to see with clarity. Learn
						to use the (yet to be) time-honored techniques in new and
						invigorating fashion. Become one with the web.
					</p>
				</div>
			</div>
			<div id="supportingText">
				<div id="explanation">
					<h3>
						So What is This About?
					</h3>
					<p>
						There is clearly a need for
						<acronym title="Cascading Style Sheets">CSS</acronym> to be taken
						seriously by graphic artists. The Zen Garden aims to excite,
						inspire, and encourage participation. To begin, view some of the
						existing designs in the list. Clicking on any one will load the
						style sheet into this very page. The code remains the same, the
						only thing that has changed is the external .css file. Yes,
						really.
					</p>
					<p>
						<acronym title="Cascading Style Sheets">CSS</acronym> allows
						complete and total control over the style of a hypertext document.
						The only way this can be illustrated in a way that gets people
						excited is by demonstrating what it can truly be, once the reins
						are placed in the hands of those able to create beauty from
						structure. To date, most examples of neat tricks and hacks have
						been demonstrated by structurists and coders. Designers have yet
						to make their mark. This needs to change.
					</p>
				</div>
				<div id="participation">
					<h3>
						Participation
					</h3>
					<p>
						Graphic artists only please. You are modifying this page, so
						strong
						<acronym title="Cascading Style Sheets">CSS</acronym> skills are
						necessary, but the example files are commented well enough that
						even
						<acronym title="Cascading Style Sheets">CSS</acronym> novices can
						use them as starting points. Please see the
						<a href="http://www.mezzoblue.com/zengarden/resources/"
							title="A listing of CSS-related resources"><acronym
							title="Cascading Style Sheets">CSS</acronym> Resource Guide</a> for
						advanced tutorials and tips on working with
						<acronym title="Cascading Style Sheets">CSS</acronym>.
					</p>
					<p>
						You may modify the style sheet in any way you wish, but not the
						<acronym title="HyperText Markup Language">HTML</acronym>. This
						may seem daunting at first if you’ve never worked this way
						before, but follow the listed links to learn more, and use the
						sample files as a guide.
					</p>
					<p>
						Download the sample
						<a href="http://www.csszengarden.com/zengarden-sample.html"
							title="This page's source HTML code, not to be modified.">html
							file</a> and
						<a href="http://www.csszengarden.com/zengarden-sample.css"
							title="This page's sample CSS, the file you may modify.">css
							file</a> to work on a copy locally. Once you have completed your
						masterpiece (and please, don’t submit half-finished work) upload
						your .css file to a web server under your control.
						<a href="http://www.mezzoblue.com/zengarden/submit/"
							title="Use the contact form to send us your CSS file">Send us
							a link</a> to the file and if we choose to use it, we will spider the
						associated images. Final submissions will be placed on our server.
					</p>
				</div>
				<div id="benefits">
					<h3>
						Benefits
					</h3>
					<p>
						Why participate? For recognition, inspiration, and a resource we
						can all refer to when making the case for
						<acronym title="Cascading Style Sheets">CSS</acronym>-based
						design. This is sorely needed, even today. More and more major
						sites are taking the leap, but not enough have. One day this
						gallery will be a historical curiosity; that day is not today.
					</p>
				</div>
				<div id="requirements">
					<h3>
						Requirements
					</h3>
					<p>
						We would like to see as much
						<acronym title="Cascading Style Sheets, version 1">CSS1</acronym>
						as possible.
						<acronym title="Cascading Style Sheets, version 2">CSS2</acronym>
						should be limited to widely-supported elements only. The css Zen
						Garden is about functional, practical
						<acronym title="Cascading Style Sheets">CSS</acronym> and not the
						latest bleeding-edge tricks viewable by 2% of the browsing public.
						The only real requirement we have is that your
						<acronym title="Cascading Style Sheets">CSS</acronym> validates.
					</p>
					<p>
						Unfortunately, designing this way highlights the flaws in the
						various implementations of
						<acronym title="Cascading Style Sheets">CSS</acronym>. Different
						browsers display differently, even completely valid
						<acronym title="Cascading Style Sheets">CSS</acronym> at times,
						and this becomes maddening when a fix for one leads to breakage in
						another. View the
						<a href="http://www.mezzoblue.com/zengarden/resources/"
							title="A listing of CSS-related resources">Resources</a> page for
						information on some of the fixes available. Full browser
						compliance is still sometimes a pipe dream, and we do not expect
						you to come up with pixel-perfect code across every platform. But
						do test in as many as you can. If your design doesn’t work in at
						least IE5+/Win and Mozilla (run by over 90% of the population),
						chances are we won’t accept it.
					</p>
					<p>
						We ask that you submit original artwork. Please respect copyright
						laws. Please keep objectionable material to a minimum; tasteful
						nudity is acceptable, outright pornography will be rejected.
					</p>
					<p>
						This is a learning exercise as well as a demonstration. You retain
						full copyright on your graphics (with limited exceptions, see
						<a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission
							guidelines</a>), but we ask you release your
						<acronym title="Cascading Style Sheets">CSS</acronym> under a
						Creative Commons license identical to the
						<a href="http://creativecommons.org/licenses/sa/1.0/"
							title="View the Zen Garden's license information.">one on
							this site</a> so that others may learn from your work.
					</p>
					<p>
						Bandwidth graciously donated by
						<a href="http://www.dreamfirestudios.com/">DreamFire Studios</a>
					</p>
				</div>
				<div id="footer">
					<a href="http://validator.w3.org/check/referer"
						title="Check the validity of this site’s XHTML">xhtml</a>  
					<a href="http://jigsaw.w3.org/css-validator/check/referer"
						title="Check the validity of this site’s CSS">css</a>  
					<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/"
						title="View details of the license of this site, courtesy of Creative Commons.">cc</a>
					<a href="http://mezzoblue.com/zengarden/faq/#s508"
						title="Read about the accessibility of this site">508</a>  
					<a href="http://www.mezzoblue.com/zengarden/faq/#aaa"
						title="Read about the accessibility of this site">aaa</a>
				</div>
			</div>
			<div id="linkList">
				<div id="linkList2">
					<div id="lselect">
						<h3>
							Select a Design:
						</h3>
						<ul>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: a"
									accesskey="a">Sample #1</a> by
								<a href="javascript://" onclick="removeElement()"">Log In</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: b"
									accesskey="b">Sample #2</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: c"
									accesskey="c">Sample #3</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: d"
									accesskey="d">Sample #4</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: e"
									accesskey="e">Sample #5</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: f"
									accesskey="f">Sample #6</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: g"
									accesskey="g">Sample #7</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/" title="AccessKey: h"
									accesskey="h">Sample #8</a> by
								<a href="http://www.mezzoblue.com/">Dave Shea</a> 
							</li>
						</ul>
					</div>
					<div id="larchives">
						<h3>
							Archives:
						</h3>
						<ul>
							<li>
								<a href="http://www.csszengarden.com/"
									title="View next set of designs. AccessKey: n" accesskey="n">next
									designs »</a> 
							</li>
							<li>
								<a href="http://www.csszengarden.com/"
									title="View previous set of designs. AccessKey: p"
									accesskey="p">« previous designs</a>
							</li>
							<li>
								<a href="http://www.mezzoblue.com/zengarden/alldesigns/"
									title="View every submission to the Zen Garden. AccessKey: w"
									accesskey="w">View All Designs</a>
							</li>
						</ul>
					</div>
					<div id="lresources">
						<h3>
							Resources:
						</h3>
						<ul>
							<li>
								<a href="http://www.csszengarden.com/001/001.css"
									title="View the source CSS file for the currently-viewed design, AccessKey: v"
									accesskey="v">View This Design’s <acronym
									title="Cascading Style Sheets">CSS</acronym> </a>
							</li>
							<li>
								<a href="http://www.mezzoblue.com/zengarden/resources/"
									title="Links to great sites with information on using CSS. AccessKey: r"
									accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym>
									Resources</a>
							</li>
							<li>
								<a href="http://www.mezzoblue.com/zengarden/faq/"
									title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q"
									accesskey="q"><acronym title="Frequently Asked Questions">FAQ</acronym>
								</a> 
							</li>
							<li>
								<a href="http://www.mezzoblue.com/zengarden/submit/"
									title="Send in your own CSS file. AccessKey: s" accesskey="s">Submit
									a Design</a>
							</li>
							<li>
								<a href="http://www.mezzoblue.com/zengarden/translations/"
									title="View translated versions of this page. AccessKey: t"
									accesskey="t">Translations</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="extraDiv1">
		</div>
		<div id="extraDiv2">
		</div>
		<div id="extraDiv3">
		</div>
		<div id="extraDiv4">
			<div id="yincang">
				<p>
					&nbsp;
				</p>
				<p>
					How to post
				</p>
				<p>
					&nbsp;
				</p>
				<p>
					Need features
				</p>
				<p>
					&nbsp;
				</p>
				<p>
					Suggestions
				</p>
				<p>
					&nbsp;
				</p>
			</div>
			<div id="yincang2">
				<div align="left">
					<span style="color: red;">${user_login_error1}</span>
					<span style="color: red;">${user_login_error2}</span>
					<span style="color: red;">${user_login_error3}</span>
				</div>
				<form action="loginuser" method="post">

					<p>
						username:
					</p>
					<p>
						<input type="text" name="name" id="name" />
					</p>
					<p>
						password:
					</p>
					<p>
						<input type="password" name="password" id="password" />
					</p>
					<p>
						<input type="submit" value="login" />
						<input type="button" value="register"
							onclick="javascript:location.href='/myfir/user/user_register.jsp'" />
					</p>
				</form>
			</div>
		</div>
		<div id="extraDiv5">
		</div>
		<div id="extraDiv6">
		</div>
	</body>
</html>
